@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

/* For AppBar */
.draggable {
    -webkit-user-select: none;
    -webkit-app-region: drag;
  }
body {
  margin: 0;
  padding: 0;
}
.undraggable {
    -webkit-app-region: no-drag;
  }

.suspension {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  text-align: center; /* 文本水平居中 */
  width: 100px; /* 悬浮球的宽度 */
  height: 100px; /* 悬浮球的高度，可根据需要调整 */
  border-radius: 50%; /* 圆形容器 */
  background-color: #0e0e0e; /* 背景颜色，可根据需要调整 */
  color: #ffffff; /* 文本颜色，通常使用对比色 */
  font-size: 14px; /* 文本大小 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  position: fixed; /* 固定定位 */
  z-index: 9999; /* 确保悬浮球在最上层 */
  /* 其他样式... */
}

/* 为了使第二行文本（盈亏百分比）更突出，可以使用不同的字体大小或颜色 */
.suspension .profit-loss {
  font-weight: bold; /* 字体加粗 */
  font-size: 16px; /* 较大的字体大小 */
}


/* 盈亏颜色样式 */
.profit-up {
  color: red; /* 红色表示上涨 */
}

.profit-down {
  color: green; /* 绿色表示下跌 */
}






.stock-ticker {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0e0e0e;
  /*background: linear-gradient(to right, #0e0e0e, #7DBAFC);*/
  opacity: 0.8;
  /*background-color: #409eff;*/
  /*background: linear-gradient(to right, #409eff, #7DBAFC);*/
  padding: 1px;
  border-radius: 50%; /* 圆形容器 */
  color: white;
  display: flex;
  width: 100px; /* 悬浮球的宽度 */
  height: 100px; /* 悬浮球的高度，可根据需要调整 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  font-weight: bolder;

}

.stock-name {
  /*font-weight: bolder;*/

}

.profit-loss {
  transition: opacity 1s ease-in-out;
  opacity: 1;
  color: #22ff00;
}
.profit-gain {
  transition: opacity 1s ease-in-out;
  opacity: 1;
  color: #ff0000;
}
.spinner {
  border: 5px solid #f3f3f3; /* 旋转图标的边框颜色 */
  border-top: 5px solid #409eff; /* 旋转图标的顶部颜色 */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 当股票信息改变时，添加一个类来触发淡出效果 */
/*.stock-ticker.fading .stock-name, .stock-ticker.fading .profit-loss {*/
/*  opacity: 0;*/
/*}*/

.stock-ticker {
  overflow: hidden;
  position: relative;
  /*height: 50px; !* 悬浮球的高度 *!*/
}

.stock-info {
  position: absolute;
  /*top: 0;*/
  /*left: 0;*/
  transition: left 1s ease-in-out;
}

/* 当需要显示新的信息时，移动股票信息的位置 */
.stock-info.slideUp {
  left: 15px;
}

.stock-info.slideDown {
  left: -100%;
}